import React, {useCallback, useEffect} from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableHighlight,
  NativeModules,
} from 'react-native';
import {useDispatch, useSelector} from 'react-redux';
import {useNavigation} from '@react-navigation/native';
import {langConfig} from '../../../../i18n';
import PatIcon from '../../../../component/base/PatIcon';
import Colors from '../../../../utils/Colors';
import {useTrackData} from '../../../../mixins';
import SettingTop from '../../../../component/account/setting/SettingTop';
import {useTranslation} from 'react-i18next';
const HEIGHT = NativeModules.StatusBarManager.HEIGHT;

const SetLang = props => {
  const {t} = useTranslation();
  const dispatch = useDispatch();
  const langCode = useSelector(state => state.common.langCode);
  const navigation = useNavigation();
  const onChangeLang = useCallback(
    lang => () => {
      dispatch({type: 'common/setLangCode', payload: lang});
      navigation.navigate('home');
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [],
  );
  useTrackData();
  return (
    <View style={styles.container}>
      <SettingTop title={t('setting.setting')} />
      {langConfig.map(item => {
        return (
          <TouchableHighlight
            key={item.value}
            activeOpacity={0.8}
            underlayColor={Colors.white}
            onPress={onChangeLang(item.value)}
            style={styles.langItem}>
            <View style={styles.langItemView}>
              <Text>{item.name}</Text>
              {item.value === langCode ? (
                <PatIcon
                  name={'success-check'}
                  size={18}
                  color={Colors.patFontRed}
                />
              ) : null}
            </View>
          </TouchableHighlight>
        );
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: HEIGHT + 40,
    backgroundColor: '#ecf0f1',
  },
  langItem: {
    marginTop: 10,
    backgroundColor: Colors.white,
    height: 30,
    width: '100%',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row',
    paddingLeft: 15,
    paddingRight: 15,
  },
  langItemView: {
    height: 30,
    width: '100%',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row',
  },
});

export default SetLang;
